<script setup lang="ts"></script>

<template>
  <a-menu mode="horizontal" style="position: fixed">
    <!-- SubMenu 必须传递 key，如不传递，该 SubMenu 下子元素将提前渲染，而且部分场景无法进行有效高亮 -->
    <a-sub-menu key="lesson1">
      <!-- #title 是 v-slot:title的简写 s-sub-menu 中有一个 <slot name="title"></slot> -->
      <template #title> 第一章节 </template>
      <a-menu-item key="1">
        <router-link to="/lesson1/chapter1">第一个场景</router-link>
      </a-menu-item>
      <a-menu-item key="2">
        <router-link to="/lesson1/chapter2">材质和光照</router-link>
      </a-menu-item>
      <a-menu-item key="3">
        <router-link to="/lesson1/chapter3">运动</router-link>
      </a-menu-item>
      <a-menu-item key="4">
        <router-link to="/lesson1/chapter4">交互控制</router-link>
      </a-menu-item>
      <a-menu-item key="5">
        <router-link to="/lesson1/chapter5">响应窗口变化</router-link>
      </a-menu-item>
    </a-sub-menu>
    <a-sub-menu key="lesson2">
      <template #title> 第二章节 </template>
      <a-menu-item key="1">
        <router-link to="/lesson2/chapter1">添加移除网格体</router-link>
      </a-menu-item>
      <a-menu-item key="2">
        <router-link to="/lesson2/chapter2">雾化</router-link>
      </a-menu-item>
      <a-menu-item key="3">
        <router-link to="/lesson2/chapter3">重写材质</router-link>
      </a-menu-item>
      <a-menu-item key="4">
        <router-link to="/lesson2/chapter4">更改集合体的属性</router-link>
      </a-menu-item>
    </a-sub-menu>
  </a-menu>

  <router-view />
</template>

<style scoped></style>
